<script lang="ts" setup>
import BottomBar from './components/BottomBar.vue';
import { useRoute } from 'vue-router';
window.addEventListener('scroll', function() {
  // 获取当前滚动位置
  var scrollTop = window.pageYOffset || document.documentElement.scrollTop;

  // 判断是否滚动到顶部
  if (scrollTop <= 0) {
    // 将滚动位置设置为1，允许用户继续滚动
    window.scrollTo(0, 1);
  }

  // 判断是否滚动到底部
  var windowHeight = window.innerHeight;
  var docHeight = document.documentElement.scrollHeight;
  if (scrollTop + windowHeight >= docHeight) {
    // 将滚动位置设置为docHeight - windowHeight - 1，允许用户继续滚动
    window.scrollTo(0, docHeight - windowHeight - 1);
  }
});

</script>
<template>
  <section class="layout">
    <main class="main">
      <RouterView v-slot="{ Component }">
        <Transition name="fade" mode="out-in">
          <div>
            <component :is="Component" :key="$route.path" class="page" v-if="!$route.meta.keepAlive" />
            <keep-alive v-if="$route.meta.keepAlive">
              <component :is="Component" :key="$route.path" class="page" />
            </keep-alive>
          </div>
        </Transition>
      </RouterView>
    </main>
    <!-- 底部导航栏 -->
    <BottomBar :visible="!!$route.meta.bottomBar"></BottomBar>
  </section>
</template>
<style lang="scss" scoped>
.layout {
  background-color: $body;
  min-height: 100vh;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;

  .main {
    flex: 1;
    display: flex;
    flex-direction: column;

    .page {
      flex: 1;
      color: $text;
      position: relative;
    }
  }
}
</style>
